<template>
	<view :class="flag == 1 ? 'flag' : ''" :style="{'height':windowHeight+'rpx'}">
		
		<block v-if="formContent">
			<view class="alipaysubmit" v-html="formContent"></view>
		</block>
		<block v-else>
			<block v-if="flag == 1">
				<view class="bg">
		
				</view>
			</block>
			<block v-else>
				<image class="img-107" src="../../static/107.png"></image>
			
				<view class="top">
					<view class="name">付款给 {{obj.merchantName}} 商家</view>
					<view class="active-name margin-bottom_50rpx">活动: {{obj.activityName}}</view>
					<view class="active-name margin-bottom_20rpx">支付金额</view>
					<view class="display-a padding-bottom_20rpx p-bo">
						<view class="font-weight_bold font-size_40rpx">￥</view>
						<input type="text" v-model="total" placeholder="请输入付款金额" disabled placeholder-class="p-class"
							class="p-input" />
					</view>
				</view>
			
				<lzc-keyboard ref="lzckeyboard" :defaultValue='total' :defaultType='set.payType' @change="change" @confirm="confirm"></lzc-keyboard>
			</block>
		</block>
		
	</view>
</template>

<script>
	import lzcKeyboard from "@/components/lzc-keyboard/lzc-keyboard.vue";
	export default {
		components: {
			lzcKeyboard,
		},
		data() {
			return {
				total: '',
				shopCodeId: '',
				uaType: '', //微信UA micromessenger   抖音UA bytedancewebview
				pUid: '', //抖音用户UID
				
				mobilePhoneType: '', //手机系统
				flag: '', //1表示已拉起支付接口

				outTradeNo: '', //订单号

				set: {}, //支付配置
				
				obj: {},

				ip: '',
				
				formContent: '',
				
				windowHeight: '',
				
				merchantId:''
			}
		},

		onLoad(options) {
		
			
		
			
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2;
				}
			});
			if (options.uaType) {
				this.uaType = options.uaType;
			}
			if (options.uid) {
				this.pUid = options.uid;
			     // this.pUid='cec257b2edc84ed4ad09c06dd4635363'
				 
				
			}
			if (options.merchantId) {
				this.merchantId = options.merchantId;
				
				this.paySet()
			
			     // this.pUid='cec257b2edc84ed4ad09c06dd4635363'
			}
			if (options.id) {
				
				this.shopCodeId = options.id;
				
				 // this.shopCodeId = 'a66a86325ccc47fdbddd8dec0b1a019d'
			}
		},

		onShow() {
			this.$at.releaseKey('wxPay');
			let platform = uni.getSystemInfoSync().platform;
			if (platform == 'ios') {
				this.mobilePhoneType = platform;
			}

			if (this.flag == 1) {
				
				uni.showModal({
					content: "支付中==>"+this.outTradeNo,
					showCancel: false,
					confirmText: '查询支付状态',
					success: () => {
						this.getPayType();
					}
				})
			}

		},

		methods: {

			//支付配置
			async paySet() {
				const result = await this.$http.post({
					url: this.$api.selectByPrimaryMerchantId,
					data: {
						merchantId: this.merchantId,
					}
				});
				if (result.code == 2000) {
					this.set = result.data;
				} else {
					uni.showModal({
						content: "查询支付类型接口错误==>" + result.msg
					})
				}
			},

			//ios 支付完成后查询支付状态
			async getPayType() {
				const result = await this.$http.post({
					url: this.$api.getTradeStateDesc,
					data: {
						outTradeNo: this.outTradeNo,
					}
				});
				if (result.code == 2000) {

				} else {
					uni.showModal({
						content: "查询支付状态接口错误==>" + result.msg
					})
				}
			},

		

			change(e) {
				this.total = e;
			},

			confirm(e,payType) {
				//payType 1微信  2支付宝
				
				if (this.total) {

					this.$at.uniDoFunc({
						// 键名
						key: 'wxPay',
						// 是否立即触发,默认触发
						// instant: true,
						success: async () => {
							//锁定
							this.$at.lockKey('wxPay');
							this.getWxH5Pay(payType);
							// if (this.uaType == 'bytedancewebview') {
							// 	this.getWxH5Pay(payType);
							// }else {
							// 	this.$at.releaseKey('wxPay');
							// 	uni.showModal({
							// 		content: "请打开抖音APP,使用扫一扫功能扫码进入!",
							// 		showCancel: false,
							// 		confirmText: '确定',
							// 		success() {
							// 			window.close();
							// 		}
							// 	})
							// }
							
						}
					});
				} else {
					this.$sun.toast('请输入支付金额', 'none');
				}
			},

			async getWxH5Pay(payType) {
				
				let getUrl = '';
				
				if (payType == 1) {
					//1微信服务商支付 2微信普通支付
					if (this.set.payStatus.indexOf('1') != -1) {
						getUrl = this.$api.h5Pay;
					}
					if (this.set.payStatus.indexOf('2') != -1) {
						getUrl = this.$api.shh5Pay;
					}
				}
				if (payType == 2) {
					//3支付宝服务商支付 4支付宝普通支付
					if (this.set.payStatus.indexOf('3') != -1) {
						getUrl = this.$api.fwsWapPay;
					}
					if (this.set.payStatus.indexOf('4') != -1) {
						getUrl = this.$api.ptsjWapPay;
					}
				}
				
				const result = await this.$http.post({
					url: getUrl,
					data: {
						payAmount: this.total, //支付金额
						// total: this.total, //支付金额
						id: this.pUid, //用户列表id
						activityId:this.shopCodeId //商家活动ID
						
					}
				});
				if (result.code == 200) {
					
					this.$at.releaseKey('wxPay');
					
					if (this.mobilePhoneType == 'ios') {
						this.flag = 1;
					}
					
					if (payType == 1) {
						this.outTradeNo = result.data.outTradeNo;
						window.location.href = result.data.h5_url;
					}
					
					if (payType == 2) {
						this.formContent = result.data; // 记得data中声明该变量
						this.$nextTick(() => {
							//这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
							document.forms['punchout_form'].submit();
						});
					}
				}else {
					this.$at.releaseKey('wxPay');
					uni.showModal({
						content: "支付接口错误==>" + result.msg,
						showCancel: false,
						confirmText: '确定',
						success() {

						}
					})
				}
			},

			async getPay() {
					const result = await this.$http.post({
						url: this.$api.nativePay,
						data: {
							total: this.total, //支付金额
							shopCodeId: this.shopCodeId, //商家活动ID
							
						}
					});
					if (result.code == 200) {
						this.$at.releaseKey('wxPay');
						
					} else {
						this.$at.releaseKey('wxPay');
						uni.showModal({
							content: "支付接口错误==>" + result.msg,
							showCancel: false,
							confirmText: '确定',
							success() {

							}
						})
					}
				},

			}
		}
</script>

<style lang="scss">
	.flag {
		background-color: #00074d;
	}

	.bg {
		background: url("~static/110.jpg");
		width: 750rpx;
		height: 1444rpx;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.p-input {
		color: #000000;
		font-size: 44rpx;
		margin-left: 20rpx;
		width: 600rpx;
	}

	.p-class {
		color: #999999;
		font-size: 44rpx;
	}

	.active-name {
		font-size: 26rpx;
		color: #666666;
	}

	.name {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.top {
		width: 750rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx 26rpx 60rpx;
		margin-top: -40rpx;
		position: absolute;
		z-index: 9;
	}

	.img-107 {
		width: 750rpx;
		height: 444rpx;
	}
</style>